<template>
  <div style="background: #ffffff">
    <a-card :bordered="false" title="出库箱">
      <a-row :gutter="16" justify="center">
        <a-input size="large" placeholder="请贴合nfc标签" style="width:50%">
          <template #suffix>
            <shake-outlined/>
          </template>
        </a-input>
      </a-row>
      <PageWrapper contentBackground>

        <Description
            size="middle"
            title="退款申请"
            :bordered="false"
            :column="2"
            :data="refundData"
            :schema="refundSchema"
        >
        </Description>

        <Description
            size="middle"
            title="用户信息"
            :bordered="false"
            :column="2"
            :data="personData"
            :schema="personSchema"
        />

        <BasicTable @register="registerRefundTable"/>
      </PageWrapper>
    </a-card>
  </div>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
import {Description} from '@apps/antd-admin/src/components/description';
import {BasicTable, useTable} from '@apps/antd-admin/src/components/Table';
import {PageWrapper} from '@apps/antd-admin/src/components/page'
import {Divider} from 'ant-design-vue'

import {
  refundSchema,
  refundData,
  personSchema,
  personData,
  refundTableSchema,
  refundTimeTableSchema,
  refundTableData,
  refundTimeTableData,
} from './data/data'

export default defineComponent({
  components: {
    Description,
    BasicTable,
    PageWrapper,
    [Divider.name]: Divider,
  },
  setup() {
    const [registerRefundTable] = useTable({
      title: '拍摄方式',
      dataSource: refundTableData,
      columns: refundTableSchema,
      pagination: false,
      showIndexColumn: false,
      scroll: {y: 300},
      showSummary: true,
      summaryFunc: handleSummary,
    })

    const [registerTimeTable] = useTable({
      title: '退货进度',
      columns: refundTimeTableSchema,
      pagination: false,
      dataSource: refundTimeTableData,
      showIndexColumn: false,
      scroll: {y: 300},
    })

    function handleSummary(tableData: any[]) {
      let totalT5 = 0
      let totalT6 = 0
      tableData.forEach((item) => {
        totalT5 += item.t5
        totalT6 += item.t6
      })
      return [
        {
          t1: '总计',
          t5: totalT5,
          t6: totalT6,
        },
      ]
    }

    return {
      registerRefundTable,
      registerTimeTable,
      refundSchema,
      refundData,
      personSchema,
      personData,
    }
  },
})
</script>
<style lang="less" scoped>
.desc-wrap {
  padding: 16px;
  background-color: @component-background;
}

::v-deep(.vben-basic-title-normal) {
  font-weight: bold;
  font-size: 18px;
}
</style>
